<template>
  <div class="app-container">
    <el-row :gutter="16">
      <el-col :span="8" :xs="24" class="mb-16px">
        <el-card>
          <div class="text-lg">销售金额</div>
          <view class="flex justify-center mt-16px">
            <el-statistic
              title=""
              :value="totalAmount"
              :precision="2"
              suffix="元"
              value-style="font-size: 32px"
            />
          </view>
          <view class="flex items-center justify-between mt-24px">
            <el-statistic
              title="昨日收入"
              :value="111"
              :precision="2"
              suffix="元"
            />
            <el-statistic
              title="今日收入"
              :value="111"
              :precision="2"
              suffix="元"
            />
            <el-statistic
              title="本月收入"
              :value="111"
              :precision="2"
              suffix="元"
            />
          </view>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" class="mb-16px">
        <el-card>
          <div class="text-lg">设备订单</div>
          <view class="flex justify-center mt-16px">
            <el-statistic
              title=""
              :value="totalOrder"
              :precision="2"
              suffix="单"
              value-style="font-size: 32px"
            />
          </view>
          <view class="flex items-center justify-between mt-24px">
            <el-statistic
              title="昨日单量"
              :value="111"
              :precision="2"
              suffix="单"
            />
            <el-statistic
              title="今日单量"
              :value="111"
              :precision="2"
              suffix="单"
            />
            <el-statistic
              title="本月单量"
              :value="111"
              :precision="2"
              suffix="单"
            />
          </view>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" class="mb-16px">
        <el-card>
          <div class="text-lg">设备情况</div>
          <view class="flex justify-center mt-16px">
            <el-statistic
              title=""
              :value="totalDevice"
              :precision="2"
              suffix="台"
              value-style="font-size: 32px"
            />
          </view>
          <view class="flex items-center justify-between mt-24px px-32px">
            <el-statistic
              title="在线设备"
              :value="111"
              :precision="2"
              suffix="台"
            />
            <el-statistic
              title="离线设备"
              :value="12"
              :precision="2"
              suffix="台"
            />
          </view>
        </el-card>
      </el-col>
    </el-row>
    <el-card>
      <div class="h-65vh">
        <v-chart class="h-100%" :option="option" autoresize />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { use } from "echarts/core";
import { useTransition } from "@vueuse/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
} from "echarts/components";
import VChart from "vue-echarts";
import { ref } from "vue";

defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
]);

const duration = 1500;
const totalAmountSource = ref(0);
const totalAmount = useTransition(totalAmountSource, {
  duration,
});
const totalOrderSource = ref(0);
const totalOrder = useTransition(totalOrderSource, {
  duration,
});
const totalDeviceSource = ref(0);
const totalDevice = useTransition(totalDeviceSource, {
  duration,
});

totalOrderSource.value = 1000;
totalDeviceSource.value = 500;
totalAmountSource.value = 172000;

const option = ref({
  title: {
    text: "统计数据",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["成交金额（元）", "成交单量（单）"],
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {
        show: true,
        title: "保存为图片",
      },
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "成交金额（元）",
      type: "line",
      stack: "Total",
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "成交单量（单）",
      type: "line",
      stack: "Total",
      data: [220, 182, 191, 234, 290, 330, 310],
    },
  ],
});
</script>

<style scoped></style>
